<template>
  <transition name="scale">
    <div class="dropdown-box scale-box" v-show="isShowUserInfo">
      <nav class="tab-nav">
        <a class="nav-item" :class="{active: true}">修改密码</a>
      </nav>
      <div class="setting-wrapper">
        <div class="setting-box">
          <el-form :model="updatePass" :rules="updatePassRule" ref="updatePassForm" label-width="85px" class="edit-pass-info">
            <el-form-item label="旧密码" prop="oldPwd" class="form-group">
              <el-input type="password" v-model="updatePass.oldPwd" auto-complete="off" class="flex1"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd" class="form-group">
              <el-input type="password" v-model="updatePass.newPwd" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkNewPwd" class="form-group">
              <el-input type="password" v-model="updatePass.checkNewPwd" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="btn-group-footer">
        <a class="ake_btn ake_btn_blue btn_block" @click="updatePwd('updatePassForm')">提交</a>
      </div>
    </div>
  </transition>
</template>

<script>
import common from '../../mixins/common.js'
import crypto from '../../mixins/crypto.js'
import constans from '../../assets/utils/Constans.js';
import { count, deepCopyObj } from '../../assets/js/help.js'
export default {
  mixins: [common, crypto],
  data() {
    let validRequired = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('不能为空'));
        return;
      }
    };
    let validatePass = (rule, value, callback) => {
      validRequired(rule, value, callback);
      notSpace(rule, value, callback);
      callback();
    };
    let notSpace = (rule, value, callback) => {
      if (/\s/.test(value)) {
        callback(new Error('不能包含空格'));
        return;
      }
    };
    let validateCheckPass = (rule, value, callback) => {
      validRequired(rule, value, callback);
      if (value !== this.updatePass.newPwd) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };
    return {
      isUpdatePass: false,
      isUpdateInfo: false,
      userInfo: {},
      updatePass: {
        oldPwd: '',
        newPwd: '',
        checkNewPwd: ''
      },
      updatePassRule: {
        oldPwd: [
          { validator: validatePass, trigger: 'blur' },
          { min: 6, max: 16, message: '长度为6到16位', trigger: 'blur' }
        ],
        newPwd: [
          { validator: validatePass, trigger: 'blur' },
          { min: 6, max: 16, message: '长度为6到16位', trigger: 'blur' }
        ],
        checkNewPwd: [
          { validator: validateCheckPass, trigger: 'blur' },
          { min: 6, max: 16, message: '长度为6到16位', trigger: 'blur' }
        ]
      },
    }
  },
  props: {
    isShowUserInfo: Boolean
  },
  created() {

  },
  methods: {
    logout () {
      let self = this;
      this.$http.post(constans.logout).then((response) => {
        var result = response.data;
        if (result.messageCode === 200) {
          self.$router.push("/login");
        } else {
          self.showToast(result.message, 2, 1500);
        }
      }, (response) => {
        self.showToast("服务器已关闭", 2, 1500);
      })
    },

    updatePwd(formName) {
      let self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            oldPass: self.updatePass.oldPwd,
            newPass: self.updatePass.newPwd,
            againPass: self.updatePass.checkNewPwd
          };
          self.$http.post(constans.updatePass, params).then((response) => {
            var result = response.data;
            if (result.messageCode === 200) {
              self.showToast("修改成功", 0, 1500);
              self.isUpdateInfo = false;
              self.resetPassArea();
              self.logout();
            } else {
              self.showToast(result.message, 2, 1500);
            }
          }, (response) => {
            self.showToast('服务器已关闭', 2, 1000);
          })
        } else {
          return false;
        }
      });
    },
    resetPassArea() {
      if (count(this.$refs) > 0 && this.$refs.updatePassForm) {
        this.$refs.updatePassForm.resetFields();
      }
    }
  }
}
</script>

<style lang="less">
  @import '../../assets/less/base/variables.less';
  // @import '../../assets/less/base/button.less';
  @import '../../assets/less/base/form.less';
  .edit-pass-info .el-form-item {
    margin-bottom: 22px;
    width: 280px;
    margin-left: 50%;
    transform: translate(-50%,0);
  }
  .dropdown-box {
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    background-color: @blueBlack;
    color: @white;
    display: flex;
    flex-direction: column;
    min-height: 450px;
    transform-origin: 95% 0; // transition: transform .2s ease-in-out;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, .5);
    border-radius: 0px 0px 4px 4px;
    z-index: 1900;
    .tab-nav {
      display: flex;
      .nav-item {
        -webkit-flex: 1;
        flex: 1;
        display: inline-block;
        height: 44px;
        line-height: 44px;
        text-align: center;
        background-color: lighten(@blueBlack, 10%);
        cursor: pointer;
        &.active {
          background-color: @blueBlack;
        }
      }
    }
    .setting-wrapper {
      -webkit-flex: 1;
      flex: 1;
      padding-top: @spacing * 2;
      .user-header {
        padding-bottom: @spacing * 2;
        text-align: center;
        p {
          padding: @spacing + 2px 0px;
          span {
            font-weight: 600;
          }
        }
      }
      .form-group {
        margin-bottom: @spacing * 2;
        padding-left: @spacing * 2;
        padding-right: @spacing * 2; // display: flex;
        .label-control,
        .control-label {
          text-align-last: justify;
          padding-right: @spacing * 2;
        }
        .control-label {
          padding-top: 5px;
        }
      }
    }
    .edit-pass-info {
      padding-top: @spacing;
      .form-group {
        margin-bottom: 24px;
      }
    }
    .edit-user-info {
      .form-group {
        margin-bottom: 20px;
      }
    }
    .btn-group-footer {
      padding: @spacing * 2;
      display: flex;
      justify-content: space-between;
      .ml20 {
        margin-left: 20px;
      }
    }
    .el-form-item.is-required .el-form-item__label:before {
      content: '';
      margin-right: 0;
      display: none;
    }
  }

  .setting-box {
    .form-group {
      .el-input__inner {
        .form-control;

      }
      .el-form-item__label {
        color: #FFF;
        padding-right: 12px;
        text-align-last: left;
      }
    }
  }
  .edit-pass-info .el-form-item__label {
    padding-top: 5px;
  }
  .edit-pass-info .el-form-item__error {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 45px;
    left: 0;
  }
</style>
